<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <link rel="stylesheet" type="text/css" href="css/init.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <!-- 引入样式文件 -->
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/> -->
 
        <style type="text/css">
        /* html,body{ padding: 0; margin: 0; width: 100%; height: 100%;} */
        p{ padding: 0; margin: 0;}
        .isali{ width: 100%; height: 100%; text-align: center; position: relative;}
        .isali em{ display: inline-block; width: 105px; height: 100px; position: absolute; right: 30px; top: 5px;
            background: url("./img/yd.png") right top no-repeat;
            /*background: url("../img/yd.png") right top no-repeat;*/
            background-size: 105px 100px;
        }
        .isali p{ padding-top:110px; font-size: 14px; line-height: 24px;}
        .isali p span{ font-size: 18px; color: #ff6c2c;}
        .isali div{ margin:80px 30px 0;}
        .isali div button{ width: 100%; margin: 10px 0; height: 42px; border: 0; font-size: 14px; color: #fff; background-color: #ccc; border-radius: 4px;}
        .isali div button:first-child{ background-color: #ff6c2c;}
        </style>
    </head>
    <body>
        <div id="app">
        </div>
        
    </body>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/request.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/vant.min.js"></script>

    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:function(){
                return{
                    isweixin:false, // 是否为微信浏览器打开的
                    ismobile:false, // 是否为手机端
                    price:'',// 获取加密的价格，用于接口传参、
                    payhtml:'', // 支付宝支付，后端获取的html存值
                    istipShow: false // 微信转其他浏览器时，这些提示不显示
                }
            },
            template:`<div>
                            <div class="isali" v-show="istipShow">
                                <em></em>
                                <p>点击右上角<br>选择<span>在浏览器</span>或者<span>Safari中打开</span></p>
                            </div>
                            <div v-html="payhtml"></div>
                        </div>`,


            mounted() {

                
            },
            methods:{
                getapipay(){
                    let newParams = {
                        type:'alipay',
                        money: this.price
                    };

                    request.post('/wechat/pay/index', newParams).then((res) =>{
                        console.log(res);                            
                        this.payhtml = res.res.data;
                        this.$nextTick(()=> {					
                            document.forms[0].submit();			//自动执行表单提交事件
                        })
                    }).catch((err) => {
                        console.log(err);
                    }); 
                }

            },

            created (){             
                this.price = getUrlParam("price"); 
                
                if(isWeiXin()){
                    this.istipShow = true
                }else{
                    if(this.price){
                        this.getapipay();
                    }
                }
                             
            },

        });
    </script>
</html>